<template>
  <div class="swiper-size">
    <swiper :options="swiperOption" v-if="carousellist.length>0">
      <swiper-slide v-for="(carouse,index) in carousellist" :key="index">
        <img class="swiperimg"
        :src="'http://120.48.37.120:9000/parttime/'+carouse.picsrc"
        >
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>

<script>
// 引入插件
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";

export default {
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      //获取轮播图列表的参数
      queryInfo:{
          pagenum:1,
          pagesize:5
      },
      carousellist:[],
      
      swiperOption: {
        loop:true,
        speed:1000,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        loop: true,
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
          hideOnClick: true,
        }
      }
    };
  },
  created(){
    this.getcarousellist()
  },
  methods:{
    //获取轮播图
    async getcarousellist(){
      const {data:res} =await this.$http.get('carousel',{params:this.queryInfo})
        if(res.meta.status!=200) return this.$message.error(res.meta.msg)
        this.carousellist=res.data.records
        
      },
  }
};
</script>
<style scoped >
.swiperimg{
  width: 100%;
  height: 450px;
}

</style>

